<!--  -->
<template>
  <div class="anov-system-check">
    <div class="anov-modal-icon-wrapper">
      <div
        class="anov-radar"
        ref="radar"
        :class="finish ? 'anov-radar-finish' : ''"
      >
        <div class="anov-radar-dot">
          <i class="anov-radar-dot1"></i>
          <i class="anov-radar-dot2"></i>
          <i class="anov-radar-dot3"></i>
          <i class="anov-radar-dot4"></i>
        </div>
        <div class="anov-radar-inner">
          <div class="anov-radar-inner-inner"></div>
          <div class="anov-check-score" ref="score">
            <span class="anov-score-score">{{ scoreTotal }}</span
            ><span class="anov-score-unit">分</span>
          </div>
        </div>
      </div>
    </div>
    <div class="anov-system-check-wrapper">
      <div id="checkText" ref="checkText" v-show="!finish">
        正在检测{{ text }}...
      </div>
      <div id="checkTextFinish" ref="checkTextFinish" v-show="finish">
        {{ checkTextFinish }}
      </div>

      <ul class="anov-system-check-list">
        <li v-for="(item, index) in checkList" :key="index" :class="item.level">
          <p class="anov-check-name">{{ item.name }}:</p>
          <p class="anov-check-value">{{ item.value }}</p>
          <p class="anov-check-score-num">{{ item.score }}分</p>
        </li>
      </ul>
    </div>
    <div class="anov-modal-btn" @click="systemClose">
      {{ $t('cmlpanel.stop') }}
    </div>
  </div>
</template>

<script>
import * as anov from 'anov-core'
export default {
  name: 'systemCheck',
  components: {},
  data() {
    return {
      checkList: [],
      text: '',
      scoreTotal: 10,
      checkTextFinish: '系统自检完成',
      finish: false,
      checkItem: {},
      num: 0,
      lowCheckList: [],
      flag: true,
      checkParams: {},
      total: 0,
      delay: 1000,
      delayClose: 5000
    }
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      this.checkParams = JSON.parse(
        JSON.stringify(anov.systemCheckServer.defaultParams)
      )
      this.getTotalScore()
      this.reset()
      this.flag = true
      anov.soundServer.volume({ type: 'bgm', vol: 0.2 })
      anov.soundServer.volume({ type: 'words', vol: 0.2 })
      let _this = this
      this.tl = new TimelineMax({
        autoRemoveChildren: true,
        onStart: function () {}
      })
      let tw1 = TweenMax.to('.anov-system-check', 0.3, { opacity: 1 })
      let tw4 = TweenMax.to(
        '.anov-system-check .anov-modal-icon-wrapper',
        0.3,
        {
          scale: 1,
          opacity: 1,
          ease: Power0.easeInOut
        }
      )
      let tw8 = TweenMax.to(
        '.anov-system-check .anov-system-check-wrapper',
        0.3,
        {
          opacity: 1
        }
      )
      let tw9 = TweenMax.to('.anov-system-check .anov-modal-btn', 0.3, {
        opacity: 1
      })
      this.tl.addLabel('start')
      this.tl
        .add(tw1, 'start+=0')
        .add(tw4, 'start+=0.1')
        .add(tw8, 'start+=.4')
        .add(tw9, 'start+=.4')
      TweenMax.to(_this.$refs['radar'], 1, {
        '--dot1Color': 'rgba(222, 90, 84, .8)',
        '--dot2Color': 'rgba(222, 90, 84, .6)',
        '--dot3Color': 'rgba(222, 90, 84, .3)',
        '--dot4Color': 'rgba(222, 90, 84, .8)',
        '--circleOColor': 'rgba(222, 90, 84, .5)',
        '--circleIColor': 'rgba(222, 90, 84, .8)',
        '--areaColor': 'rgba(222, 90, 84, 1)',
        '--textColor': 'rgba(222, 90, 84, 1)',
        '--lineColor': 'rgba(222, 90, 84, .3)'
      })
      this.getcheckList()
    },
    getTotalScore() {
      let checkParamsKey = [],
        openParamsKey = [],
        checkParams = this.checkParams,
        openParams = anov.envServer.openParams
      let total = 0,
        index = 0

      checkParamsKey = Object.keys(checkParams)
      openParamsKey = Object.keys(openParams)

      for (let i = 0; i < checkParamsKey.length; i++) {
        for (let j = 0; j < openParamsKey.length; j++) {
          let iValue = checkParamsKey[i],
            jValue = openParamsKey[j]
          if (checkParams[iValue].key == jValue) {
            checkParams[iValue].isCheck = openParams[jValue]
            if (openParams[jValue]) {
              index++
              total += checkParams[iValue].ratio * 100
            }
          }
        }
      }
      this.total = total / 100
    },
    getcheckList() {
      this.startCheck()
        .then((res) => {
          if (this.checkParams.displayEffect.isCheck) {
            return this.checkDisplayEffect()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.performance.isCheck) {
            return this.checkFps()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.video.isCheck) {
            return this.checkVideo()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.audio.isCheck) {
            return this.checkAudio()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.innerLine.isCheck) {
            return this.checkInnerLine()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.innerLine.isCheck) {
            return this.checkInnerSpeed()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.outerLine.isCheck) {
            return this.checkOuterLine()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          if (this.checkParams.outerLine.isCheck) {
            return this.checkOuterSpeed()
          } else {
            return this.noCheck()
          }
        })
        .then((res) => {
          this.setCheckList(res)
          if (!this.flag) {
            return
          }
          return this.checkFinish()
        })
        .then((res) => {
          this.finish = res
          if (!this.flag) {
            return
          }
          if (res) {
            this.checkList = [...this.lowCheckList]
            let len = this.checkList.length
            TweenMax.to('.anov-system-check-list', 0.2, { height: len * 40 })
            let speak = `系统自检已完成，您的得分是${this.scoreTotal}分`
            // for(let i = 0; i < len;i++){
            //     speak += this.checkList[i].name
            // }
            anov.voiceFeedbackServer.speak(speak)
            app.systemCheckServer.addInfo(
              `系统自检已完成，您的得分是${this.scoreTotal}分`
            )
          }
          return this.checkFinishClose()
        })
        .then((res) => {
          if (res) {
            this.systemClose()
          }
        })
    },
    setCheckList(res) {
      if (res) {
        ++this.num
      }
      let _this = this
      if (res) {
        if (this.num > 5) {
          this.checkList.splice(0, 1)
          this.checkList.push(res)
        } else {
          this.checkList.push(res)
          let h = 40 * this.num
          TweenMax.to('.anov-system-check-list', 0.3, { height: h })
        }
        if (res.level == 'low') {
          this.lowCheckList.push(res)
        }
        let soundsId1 = null
        let totalScore = this.scoreTotal + parseFloat(res.score)
        TweenMax.to(this, 0.5, {
          scoreTotal: totalScore.toFixed(0),
          roundProps: ['scoreTotal'],
          onStart: () => {
            soundsId1 = anov.soundServer.play({ type: 'number', duration: -1 })
          },
          onComplete: () => {
            anov.soundServer.stop({ type: 'number', id: soundsId1 })
          }
        })
        if (totalScore < 33) {
          TweenMax.to(_this.$refs['radar'], 1, {
            '--dot1Color': 'rgba(222, 90, 84, .8)',
            '--dot2Color': 'rgba(222, 90, 84, .6)',
            '--dot3Color': 'rgba(222, 90, 84, .3)',
            '--dot4Color': 'rgba(222, 90, 84, .8)',
            '--circleOColor': 'rgba(222, 90, 84, .5)',
            '--circleIColor': 'rgba(222, 90, 84, .8)',
            '--areaColor': 'rgba(222, 90, 84, 1)',
            '--textColor': 'rgba(222, 90, 84, 1)',
            '--lineColor': 'rgba(222, 90, 84, .3)'
          })
        } else if (totalScore < 66) {
          TweenMax.to(_this.$refs['radar'], 1, {
            '--dot1Color': 'rgba(240, 163, 13, .8)',
            '--dot2Color': 'rgba(240, 163, 13, .6)',
            '--dot3Color': 'rgba(240, 163, 13, .3)',
            '--dot4Color': 'rgba(240, 163, 13, .8)',
            '--circleOColor': 'rgba(240, 163, 13, .5)',
            '--circleIColor': 'rgba(240, 163, 13, .8)',
            '--areaColor': 'rgba(240, 163, 13, 1)',
            '--textColor': 'rgba(240, 163, 13, 1)',
            '--lineColor': 'rgba(240, 163, 13, .3)'
          })
        } else {
          TweenMax.to(_this.$refs['radar'], 1, {
            '--dot1Color': 'rgba(36, 224, 241, .8)',
            '--dot2Color': 'rgba(36, 224, 241, .6)',
            '--dot3Color': 'rgba(36, 224, 241, .3)',
            '--dot4Color': 'rgba(36, 224, 241, .8)',
            '--circleOColor': 'rgba(36, 224, 241, .5)',
            '--circleIColor': 'rgba(36, 224, 241, .8)',
            '--areaColor': 'rgba(36, 224, 241, 1)',
            '--textColor': 'rgba(36, 224, 241, 1)',
            '--lineColor': 'rgba(36, 224, 241, .3)'
          })
        }
        this.text = res.next
      }
    },
    startCheck() {
      return new Promise(function (res, rej) {
        res('start')
      })
    },
    reset() {
      this.checkList = []
      this.lowCheckList = []
      this.scoreTotal = 0
      this.finish = false
      this.text = ''
      this.num = 0

      TweenMax.set('.anov-system-check', { opacity: 0 })
      TweenMax.set('.anov-system-check .anov-modal-icon-wrapper', {
        scale: 0,
        opacity: 0
      })
      TweenMax.set('.anov-system-check .anov-modal-btn', { opacity: 0 })
      TweenMax.set('.anov-system-check-list', { height: 0 })
    },
    destroy(params) {
      this.flag = false
      this.reset()
      anov.soundServer.volume({ type: 'bgm', vol: 1 })
      anov.soundServer.volume({ type: 'words', vol: 1 })
      anov.systemCheckServer.isSystemCheckOpen = false
      if (typeof params.onClose == 'function') {
        params.onClose()
      }
    },
    systemClose() {
      app.modal.destroy({ componentsName: 'systemCheck' })
    },
    checkDisplayEffect() {
      //设置显示效果
      let _this = this
      //显示效果根据当前窗口，而不是scaleRatio
      let dw = document.body.clientWidth
      let dh = document.body.clientHeight
      let minRatio = Math.min(
        dw / anov.envServer.designSize.w,
        dh / anov.envServer.designSize.h
      )
      if (minRatio >= 1) {
        minRatio = 1
      }
      this.checkParams.displayEffect.value =
        (minRatio >= 1 ? 100 : parseFloat(minRatio * 100).toFixed(1)) + '%'
      this.checkParams.displayEffect.score = (
        (parseFloat(minRatio * this.checkParams.displayEffect.ratio) * 100) /
        this.total
      ).toFixed(0)
      let obj = { ...this.checkParams.displayEffect }
      obj.next = '性能'
      obj.level = this.getLevel(
        this.checkParams.displayEffect.score,
        this.checkParams.displayEffect.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkFps() {
      let _this = this
      this.checkParams.performance.value = anov.envServer.fps
      if (anov.envServer.fps > 24) {
        this.checkParams.performance.score =
          (parseFloat(this.checkParams.performance.ratio) * 100) / this.total
      } else {
        this.checkParams.performance.score =
          (parseFloat(
            (anov.envServer.fps / 24) * this.checkParams.performance.ratio
          ) *
            100) /
          this.total
      }
      let obj = this.checkParams.performance
      obj.next = '摄像头'
      obj.level = this.getLevel(
        this.checkParams.performance.score,
        this.checkParams.performance.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkVideo() {
      //设置摄像头
      let _this = this
      this.checkParams.video.value = anov.envServer.videoStatus
        ? '已开启'
        : '未开启'
      this.checkParams.video.score = anov.envServer.videoStatus
        ? Math.floor((this.checkParams.video.ratio * 100) / this.total)
        : 0
      let obj = this.checkParams.video
      obj.next = '麦克风'
      obj.level = this.getLevel(
        this.checkParams.video.score,
        this.checkParams.video.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkAudio() {
      //设置麦克风
      let _this = this
      this.checkParams.audio.value = anov.envServer.audioStatus
        ? '已开启'
        : '未开启'
      this.checkParams.audio.score = anov.envServer.audioStatus
        ? Math.floor((this.checkParams.audio.ratio * 100) / this.total)
        : 0
      let obj = this.checkParams.audio
      obj.next = '内网连接状态'
      obj.level = this.getLevel(
        this.checkParams.audio.score,
        this.checkParams.audio.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkInnerLine() {
      //设置内网是否 online
      let _this = this
      this.checkParams.innerLine.value = anov.envServer.localNetwork.connected
        ? '已连接'
        : '未连接'
      this.checkParams.innerLine.score = anov.envServer.localNetwork.connected
        ? Math.floor((this.checkParams.innerLine.ratio * 100) / this.total)
        : 0
      let obj = this.checkParams.innerLine
      obj.next = '内网网速'
      obj.level = this.getLevel(
        this.checkParams.innerLine.score,
        this.checkParams.innerLine.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkInnerSpeed() {
      //设置内网网速
      let _this = this
      let obj = {}
      this.getInnerNetSpeed()
      return new Promise(function (res, rej) {
        if (anov.envServer.localNetwork.connected) {
          app.envServer.addEventListener(
            'systemCheckNetworkSpeed',
            (result) => {
              _this.checkParams.innerLineSpeed.value =
                result.result.speed + result.result.unit
              let speed = 0
              if (result.result.unit == 'MB/S') {
                speed = result.result.speed * 1024
              }
              if (result.result.unit == 'KB/S') {
                speed = result.result.speed
              }
              if (result.result.unit == 'B/S') {
                speed = (result.result.speed / 1024).toFixed(0)
              }
              let level = anov.envServer.getNetLevel(speed)
              _this.checkParams.innerLineSpeed.score = Math.floor(
                ((level / 5) * _this.checkParams.innerLineSpeed.ratio * 100) /
                  _this.total
              )
              obj = _this.checkParams.innerLineSpeed
              obj.next = '外网连接状态'
              obj.level = _this.getLevel(
                _this.checkParams.innerLineSpeed.score,
                _this.checkParams.innerLineSpeed.ratio
              )
              setTimeout(() => {
                res(obj)
              }, _this.delay)
            }
          )
        } else {
          _this.checkParams.innerLineSpeed.value = 0
          let level = anov.envServer.getNetLevel(0)
          _this.checkParams.innerLineSpeed.score = 0
          obj = _this.checkParams.innerLineSpeed
          obj.next = '外网连接状态'
          obj.level = _this.getLevel(
            _this.checkParams.innerLineSpeed.score,
            _this.checkParams.innerLineSpeed.ratio
          )
          setTimeout(() => {
            res(obj)
          }, _this.delay)
        }
      })
    },
    async checkOuterLine() {
      //设置外网是否 online
      let _this = this
      let url = this.checkParams.outerLineSpeed.url
      await this.getNetSpeed(url)
        .then((res) => {
          if (isNaN(res)) {
            res = 0
          }
          this.checkParams.outerLine.value = res ? '已连接' : '未连接'
          this.checkParams.outerLine.score = res
            ? Math.floor((this.checkParams.outerLine.ratio * 100) / this.total)
            : 0
          this.checkParams.outerLineSpeed.value = res + 'KB/s'
          let level = anov.envServer.getNetLevel(res)
          this.checkParams.outerLineSpeed.score = res
            ? ((level / 5) * this.checkParams.outerLineSpeed.ratio * 100) /
              this.total
            : 0
        })
        .catch((err) => {})
      let obj = this.checkParams.outerLine

      obj.next = '外网网速'
      obj.level = this.getLevel(
        this.checkParams.outerLine.score,
        this.checkParams.outerLine.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkOuterSpeed() {
      //设置外网网速
      let _this = this
      let obj = {}
      obj = this.checkParams.outerLineSpeed
      obj.next = '系统自检完成'
      obj.level = this.getLevel(
        this.checkParams.outerLineSpeed.score,
        this.checkParams.outerLineSpeed.ratio
      )
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(obj)
        }, _this.delay)
      })
    },
    checkFinish() {
      let _this = this
      let flag = true
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(flag)
        }, _this.delay)
      })
    },
    checkFinishClose() {
      let _this = this
      let flag = true
      return new Promise(function (res, rej) {
        setTimeout(() => {
          res(flag)
        }, _this.delayClose)
      })
    },
    getNetSpeed(url) {
      return new Promise((res, rel) => {
        if (!window.navigator.onLine) {
          rel('网络未连接')
        }
        var startTime, endTime, fileSize
        var xhr = new XMLHttpRequest()
        xhr.timeout = 15000
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 2) {
            startTime = Date.now()
          }
          if (xhr.readyState !== 4) {
            return
          }
          if (xhr.status === 0 || xhr.status === 200) {
            endTime = Date.now()
            fileSize = xhr.responseText.length
            let time = endTime - startTime
            time ? time : 1
            var speed = fileSize / (time / 1000) / 1024
            res(Math.floor(speed))
          } else {
            rel('资源请求失败')
          }
        }
        xhr.open('GET', url + '?id=' + Math.random(), true)
        xhr.send()
      })
    },
    getInnerNetSpeed() {
      app.envServer.setNetWorkOption('systemCheck')
    },
    getLevel(score, ratio) {
      let low = parseFloat(ratio / 3),
        high = parseFloat((ratio / 3) * 2)
      let level = ''
      if (score < low) {
        level = 'low'
      } else if (score < high) {
        level = 'middle'
      } else {
        level = 'high'
      }
      return level
    },
    noCheck() {
      return new Promise(function (res, rej) {
        res()
      })
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
@import '../../../css/_lib-variable.scss';
.anov-system-check {
  opacity: 0;
  --dot1Color: 'rgba(36, 224, 241, .8)';
  --dot2Color: 'rgba(36, 224, 241, .6)';
  --dot3Color: 'rgba(36, 224, 241, .3)';
  --dot4Color: 'rgba(36, 224, 241, .8)';
  --circleOColor: 'rgba(36, 224, 241, .5)';
  --circleIColor: 'rgba(36, 224, 241, .8)';
  --areaColor: 'rgba(36, 224, 241, 1)';
  --textColor: 'rgba(36, 224, 241, 1)';
  --lineColor: 'rgba(36, 224, 241, .3)';
  .anov-check-score {
    color: var(--textColor);
  }
  .anov-radar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--circleOColor);
    overflow: hidden;
  }
  .anov-radar:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(
      40deg,
      rgba(0, 255, 51, 0) 30%,
      var(--areaColor) 100%
    );
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: radar-beam 5s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
  }
  .anov-radar-dot1 {
    position: absolute;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--dot1Color);
    border-radius: 50%;
  }
  .anov-radar-dot2 {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 5px;
    height: 5px;
    background: var(--dot2Color);
    border-radius: 50%;
  }
  .anov-radar-dot3 {
    position: absolute;
    top: 25px;
    left: 30px;
    width: 3px;
    height: 3px;
    background: var(--dot3Color);
    border-radius: 50%;
  }
  .anov-radar-dot4 {
    position: absolute;
    top: 25px;
    left: 70px;
    width: 6px;
    height: 6px;
    background: var(--dot4Color);
    border-radius: 50%;
  }
  .anov-radar-inner {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 19px 0 0 19px;
    border: 2px solid var(--circleIColor);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(0, 0, 0, 0) 0,
      rgba(16, 16, 21, 1) 80%
    );
  }
  .anov-radar-inner-inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(
        0deg,
        transparent 15%,
        var(--lineColor) 16%,
        var(--lineColor) 17%,
        transparent 18%,
        transparent 30%,
        var(--lineColor) 31%,
        var(--lineColor) 32%,
        transparent 33%,
        transparent 45%,
        var(--lineColor) 46%,
        var(--lineColor) 47%,
        transparent 48%,
        transparent 60%,
        var(--lineColor) 61%,
        var(--lineColor) 62%,
        transparent 63%,
        transparent 75%,
        var(--lineColor) 76%,
        var(--lineColor) 77%,
        transparent 78%
      ),
      linear-gradient(
        90deg,
        transparent 15%,
        var(--lineColor) 16%,
        var(--lineColor) 17%,
        transparent 18%,
        transparent 30%,
        var(--lineColor) 31%,
        var(--lineColor) 32%,
        transparent 33%,
        transparent 45%,
        var(--lineColor) 46%,
        var(--lineColor) 47%,
        transparent 48%,
        transparent 60%,
        var(--lineColor) 61%,
        var(--lineColor) 62%,
        transparent 63%,
        transparent 75%,
        var(--lineColor) 76%,
        var(--lineColor) 77%,
        transparent 78%
      );
  }
}
#checkText {
  margin-bottom: 20px;
}
#checkTextFinish {
  margin-bottom: 20px;
}
.anov-radar-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  animation: radar-dot 5s 0.7s infinite;
  animation-timing-function: linear;
}

.anov-system-check .anov-radar-finish:after {
  display: none;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.anov-system-check .anov-radar-finish .anov-radar-dot {
  display: none;
  opacity: 0;
}
.anov-check-score {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 90px;
}
.anov-check-score .anov-score-score {
  display: inline-block;
  font-size: 28px;
  font-weight: normal;
  transform: scale(1, 1.2);
}
.anov-check-score .anov-score-unit {
  display: inline-block;
  margin-left: 2px;
  font-size: 18px;
}
.anov-system-check-wrapper {
  margin-top: 50px;
  text-align: center;
}
.anov-system-check-list {
  padding: 0 200px;
  transition: all 0.3s ease-in;
  li {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    .anov-check-name {
      width: 120px;
      margin-right: 20px;
      text-align: right;
    }
    .anov-check-value {
      width: 100px;
      text-align: left;
    }
  }
  li.low {
    .anov-check-value,
    .anov-check-score-num {
      color: rgba(222, 90, 84, 1);
    }
  }
  li.middle {
    .anov-check-value,
    .anov-check-score-num {
      color: rgba(240, 163, 13, 1);
    }
  }
}
@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes radar-dot {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}
</style>
